<template>
    <div class="msite">
        <!-- 首页头部 -->
       <HeaderTop title="亳州市谯城区古城镇8栋15号">
            <div class="msite_login" slot="right"><span>登录|注册</span></div>
            <div class="msite_search" slot="left"><i class="iconfont icon-sousuo"></i></div>
       </HeaderTop>
        <!-- 首页导航 -->
        <nav class="msite_nav">
            <mt-swipe :auto="0" :showIndicators="true" :continuous="false">
                <mt-swipe-item>
                    <div class="swipe_item">
                        <a href=""><img src="./images/nav/1.jpg" alt=""><span>甜品饮品</span></a>
                        <a href=""><img src="./images/nav/2.jpg" alt=""><span>商超便利</span></a>
                        <a href=""><img src="./images/nav/3.jpg" alt=""><span>医疗</span></a>
                        <a href=""><img src="./images/nav/4.jpg" alt=""><span>准时达</span></a>
                        <a href=""><img src="./images/nav/5.jpg" alt=""><span>新店特惠</span></a>
                        <a href=""><img src="./images/nav/6.jpg" alt=""><span>美食</span></a>
                        <a href=""><img src="./images/nav/7.jpg" alt=""><span>预订早餐</span></a>
                        <a href=""><img src="./images/nav/8.jpg" alt=""><span>土豪推荐</span></a>
                    </div>
                </mt-swipe-item>
                <mt-swipe-item>
                    <div class="swipe_item">
                        <a href=""><img src="./images/nav/9.jpg" alt=""><span>甜品饮品</span></a>
                        <a href=""><img src="./images/nav/10.jpg" alt=""><span>商超便利</span></a>
                        <a href=""><img src="./images/nav/11.jpg" alt=""><span>医疗</span></a>
                        <a href=""><img src="./images/nav/12.jpg" alt=""><span>准时达</span></a>
                        <a href=""><img src="./images/nav/13.jpg" alt=""><span>新店特惠</span></a>
                        <a href=""><img src="./images/nav/14.jpg" alt=""><span>美食</span></a>
                    </div>
                </mt-swipe-item>
            </mt-swipe>
        </nav>
        <!-- 首页附近商家 -->
        <div class="msite_shop_list">
            <div class="shop_title">
                <i class="iconfont icon-wode"></i>
                <span>附近商家</span>
            </div>
            <!-- <div class="shop_item">
                <div class="info"><img src="./images/shop/1.jpg" alt=""></div>
                <div class="content">
                    <div class="content_title"><span class="main">品牌</span>床前明月光，地上鞋两双</div>
                    <div class="content_sell">
                        <div class="star">
                            <img src="./images/stars/star36_on@2x.png" alt="">
                            <img src="./images/stars/star36_on@2x.png" alt="">
                            <img src="./images/stars/star36_on@2x.png" alt="">
                            <img src="./images/stars/star48_half@2x.png" alt="">
                            <img src="./images/stars/star36_off@2x.png" alt="">
                            <span>3.6</span>
                        </div>
                        <div class="sell">
                            <span>月售<span>106</span>单</span>
                        </div>
                    </div>
                    <div class="send">
                        ￥<span>20</span>起送/配送费约￥<span>5</span>
                    </div>
                </div>
                <div class="footer">
                        <div class="footer_title">保&nbsp;准&nbsp;票</div>
                        <div class="footer_content">小小专送</div>
                </div> 
            </div>-->
            <ShopList></ShopList>
            
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui';

  Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
import HeaderTop from "../../components/HeaderTop/HeaderTop.vue"
import ShopList from '../../components/ShopList/ShopList.vue'
export default {

    data() {
        return {
            
        }
    },
    components:{
        HeaderTop,
        ShopList
    }
  
}
</script>

<style lang="less">
.msite{ 
    width: 100%;
    
    .msite_nav{
        // background-color: red;
        // 轮播图初始没有高读 需要自己定义
        height: 200px;
        .swipe_item{
            display: flex;
            // justify-content: space-between;
            align-content: flex-start;
            flex-wrap: wrap;
            padding: 1%;
            
            a{
            //    margin: 2px;
            margin: 10px 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content:flex-start;
                text-align: center;
                width: 25%;
                img{
                    transform: translateX(35%);
                    width: 60%;
                    height: 70%;
                }
                span{
                    font-size: 14px;
                }
            }
        }
    }
    .msite_shop_list{
        margin-top: 15px;
        .shop_title{
            padding: 5px;
            color: gray;
            font-size: 14px;
        }
       
    }
}
</style>